<template>
  <div>
    <ul>
      <li v-for="item in resultList" :key="item.id" @click="toDeatil(item.id)">
        <img :src="item.img1v1Url">
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import {searchAPI} from '@/api'
export default {
    name:'SingerRes',
    data() {
      return {
        resultList:[]
      }
    },
    methods:{
      // 获取搜索信息
      async getResult(){
        const res = await searchAPI({keywords: this.keywords, type: 100 ,limit:100});
        this.resultList = res.data.result.artists;
      },
      // 去歌手详情页
      toDeatil(id){
        this.$router.push({
          name:'detail',
          query:{id}
        })
      }
    },
    computed:{
      keywords(){
        return this.$store.state.search.searchWord;
      }
   },
   created(){
     this.getResult();
   }
}
</script>

<style lang="less" scoped>
ul{
  li{
    height: 80px;
    padding-left: 20px;
    line-height: 80px;
    font-size: 16px;
    display: flex;
    cursor: pointer;
    img{
      width: 60px;
      height: 60px;
      margin-top: 10px;
      margin-left: 10px;
      border-radius: 4px;
    }
    span{
      display: block;
      margin-left: 10px;
    }
  }
  li:nth-child(2n){
    background-color: rgb(249,249,249);
  }
  li:hover{
    background-color: rgb(240,241,242);
  }
}
</style>